<template>
  <div>
    <el-card shadow="hover">
      <el-descriptions
        :title="connectStatus?'HBase 连接参数':'HBase 未连接'"
        :style="{color:connectStatus?'black':'red'}"
        :column="4">
        <el-descriptions-item v-for="key in Object.keys(config)" :key="key" :label="key">
          {{ config[key] ?? '--' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div style="height: 20px;"></div>
    <el-card shadow="hover">
      <div style="display: flex">
        <el-button
          @click="handleDelete"
          v-if="multipleSelection.length>0"
          size="medium"
          type="danger"
          icon="el-icon-delete">
          删除表
        </el-button>
        <el-button
          @click="handleCreate"
          size="medium"
          type="primary"
          icon="el-icon-plus">
          新建表
        </el-button>
        <div style="flex: 1"></div>
      </div>
      <div style="height: 10px"></div>
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          :align="'center'"
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          :align="'center'"
          prop="name"
          label="表名">
        </el-table-column>
        <el-table-column
          :align="'center'"
          label="列族">
          <template v-slot="scope">
            <div style="display: flex;justify-content: center">
              <el-button
                v-for="(fam,i) in scope.row.families"
                :key="i"
                @click="showFamilyInfo(scope.row.familyInfo[fam])"
                size="mini">{{ fam }}
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          :align="'center'"
          label="操作"
          width="100">
          <template v-slot="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看表中数据</el-button>
          </template>
        </el-table-column>
        <el-empty slot="empty" description="暂无数据"></el-empty>
      </el-table>
    </el-card>
    <el-dialog title="新建表" :visible.sync="dialogVisible" :append-to-body="true">
      <el-form :model="newTable">
        <el-form-item label="表名" label-width="80px">
          <el-input v-model="newTable.name" size="medium" autocomplete="off"></el-input>
        </el-form-item>
        <div style="display: flex; align-items: center">
          <div style="width: 68px; margin-right: 12px; text-align: right">列族</div>
          <e-tag-input v-model="newTable.families" button-content="+"></e-tag-input>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="handleCancelCreate" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirmCreate" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer
      title="列族详情"
      :visible.sync="drawerVisible"
      direction="rtl">
      <el-descriptions direction="vertical" :column="1" style="margin: 20px" border>
        <el-descriptions-item v-for="key in Object.keys(familyInfo)" :key="key" :label="key">
          {{ familyInfo[key] }}
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>
<script>
import {mapActions} from 'vuex'

export default {
  data() {
    return {
      connectStatus: false,
      config: {},
      tableData: [],
      multipleSelection: [],
      drawerVisible: false,
      dialogVisible: false,
      newTable: {
        name: '',
        families: []
      },
      familyInfo: {}
    }
  },
  methods: {
    async init() {
      await this.loadConfigInfo()
      await this.loadAllTable()
    },
    async loadConfigInfo() {
      const resp = await this.$api.config.getConfig()
      if (resp?.ok) {
        this.config = resp.data
      } else {
        this.connectStatus = false
        this.$message.error('HBase 连接信息获取失败')
      }
    },
    async loadAllTable() {
      const resp = await this.$api.table.listTable()
      if (resp?.ok) {
        this.connectStatus = true
        this.tableData = resp.data
        this.setTables(this.tableData)
      } else {
        this.connectStatus = false
        this.$message.error('数据获取失败')
      }
    },
    handleClick(row) {
      this.setCurrentTable(row)
      this.$router.push({name: 'Record'})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCreate() {
      this.dialogVisible = true
    },
    handleCancelCreate() {
      this.dialogVisible = false
    },
    async handleConfirmCreate() {
      const resp = await this.$api.table.createTable(this.newTable.name, this.newTable.families)
      if (resp?.ok) {
        this.$message.success('新建成功')
        this.newTable.name = ''
        this.newTable.families = []
        this.dialogVisible = false
        await this.loadAllTable()
      } else {
        this.$message.error(resp?.msg ?? '新建失败')
      }
    },
    async handleDelete() {
      const tableNames = this.multipleSelection.map(table => table.name)
      try {
        const action = await this.$confirm(`此操作将永久删除 ${tableNames} , 是否继续?`, '提示', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        })
        if (action === 'confirm') {
          const resp = await this.$api.table.deleteTable(tableNames)
          if (resp?.ok) {
            this.$message.success('删除成功')
            await this.loadAllTable()
          } else {
            this.$message.error(resp?.msg ?? '删除失败')
          }
        }
      } catch (e) {
        console.log(`取消删除 ${tableNames} `)
      }
    },
    showFamilyInfo(familyInfo) {
      this.familyInfo = familyInfo
      this.drawerVisible = true
    },
    ...mapActions({
      setCurrentTable: 'global/setCurrentTable',
      setTables: 'global/setTables'
    })
  },
  async mounted() {
    await this.init()
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-table {
    &::before {
      //去除底部白线
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
    }

    th {
      &.el-table__cell {
        background-color: #f8f8f8;
      }
    }
  }

  .el-drawer__header {
    color: black;
    font-weight: bold;
  }
}
</style>